<style scoped lang="less">
	/*@import "OrderList";*/
	.order-item {
		background: white;
		display: flex;
		font-size: 0.4rem;
		padding: 2vw 3vw;
		justify-content: space-between;
		align-items: center;
		border-bottom: #f4f4f4 1px solid;
	}
	
	.order-item-amount {
		color: @--price;
	}
	
	.order-amout {
		font-size: 0.5rem;
	}
	
	.create-time {
		color: @--gray;
		font-size: 0.3rem;
		padding-top: 1vh;
	}
	.info-wrap{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

</style>
<script>
  //0关闭 5已下单 10待提现（已付款） 15可提现 20已提现
  const STATUS_CLOSE = 0;
  const STATUS_ORDER_CREATED = 5;
  const STATUS_PAID = 10;
  const STATUS_CAN_EXTRACT = 15;
  const STATUS_HAS_EXTRACTED = 20;

  import {getMyReward} from '@/api/spread';
  import Vue from 'vue';
  import {List, Tab, Tabs} from 'vant';

  Vue.use(List).use(Tab).use(Tabs);
  export default {
    name: 'order-list',
    data() {
      return {
        type: null,
        active: 0,
        types: [{index: 0, type: STATUS_PAID, title: '待提现', list: [], finished: false, loading: false},
          {index: 1, type: STATUS_CAN_EXTRACT, title: '可提现', list: [], finished: false, loading: false},
          {index: 2, type: STATUS_HAS_EXTRACTED, title: '已提现', list: [], finished: false, loading: false},
          {index: 3, type: STATUS_CLOSE, title: '已失效', list: [], finished: false, loading: false}]
      };
    },
    created() {
      this.type = this.$route.params.type;
    },
    methods: {
      onLoad(index) {
        if (this.types[index].finished) {
          return;
        }
        this.getData();
      },

      getData() {
        let vm = this;
        if (vm.types[vm.active].finished) {
          return;
        }
        let page = vm.types[vm.active].list.length / 20 + 1;
        getMyReward({page: page, size: 20, status: vm.types[vm.active].type}).then(rep => {

          vm.types[vm.active].list = vm.types[vm.active].list.concat(rep.data.data.list);
          if (vm.types[vm.active].list.length === rep.data.data.count) {
            vm.types[vm.active].finished = true;
          }
          vm.types[vm.active].loading = false;
        });
      }
    }
  }
</script>
<template>
	<div>
		<van-tabs v-if="types!==null" v-model="active" sticky animated swipeable title-active-color="#EC414D"
		          :swipe-threshold="5" lazy-render>
			<template v-for="(typeItem,index) in types">
				<van-tab :title="typeItem.title" :name="typeItem.index" :key="index">
					<van-list
						v-model="typeItem.loading"
						:finished="typeItem.finished"
						finished-text="没有更多了"
						@load="onLoad(index)">
						<div class="order-item" v-for="item in typeItem.list" :key="index+item.id">
							<span class="order-item-amount">
                    <span class="symbol">￥</span>
                    <span class="order-amout">{{GLOBAL.formatPrice(item.money)}}</span>
              </span>
							<div class="info-wrap">
								<span class="from-type">
                {{item.type===0?'订单':'会员卡'}}
                </span>
								<span class="create-time">
                {{item.create_time.substr(0,10)}}
                </span>
							</div>
						
						
						</div>
					</van-list>
				</van-tab>
			</template>
		</van-tabs>
	
	</div>
</template>
